<template>
	<view class="content">
		<ZPaging
		    ref="paging"
		    v-model="list"
			:auto="false"
		    :auto-show-system-loading="true"
			loading-more-no-more-text="沒有更多了"
			loading-more-default-text="點擊加載更多"
			loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載"
			empty-view-text="沒有數據哦~"
			refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新"
			refresher-refreshing-text="正在刷新"  
			empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗"
		    @query="queryList"
		>
			<template #top>
				<NavBar :title="title" :autoBack="false" id="nav">
					<template #left>
						<view class="navbar-left center" @click="goBack">
							<u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
							<text class="c007aff">BACK</text>
						</view>
					</template>
					<template #right>
						<view class="navbar-right center" @click="openBox">
							<u-icon class="ml-20" name="plus" color="#007aff" size="34"></u-icon>
						</view>
					</template>
					
				</NavBar>
			</template>
			<template #default>
				<view class="widths main">
					<view class="list">
						<view class="mb-20 flex item" v-for="(v,k) in list" :key="k">
							<view class="bold f32 center left">
								{{v.nickname}}
							</view>
							<view class="right">
								<view class="f26 c999 mb-10 time" >{{v.time}}</view>
								<view class="detail">
									{{v.detail}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>	
		</ZPaging>
		<Tabar></Tabar>
		
		<u-popup v-model="showForm" mode="center"  border-radius="4">
			<view class="messbox">
				<view class="txtbox">
					<u-input class="input" v-model="detail" type="textarea" input-align="left" :show-confirmbar="false"  maxlength=255  placeholder="請輸入內容" placeholder-style="color:#e0e0e0;"
						height="160"
					/>
				</view>
				
				<view class="center cfff btn" @click="subMessage">提交</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { subMessages,getMessagelist,changeMessageStatus } from "@/api/apis.js"
	import NavBar from "@/component/NavBar"
	import Tabar from "@/component/HomeTab"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	export default {
		components:{
			NavBar,
			Tabar,
			ZPaging
		},
		data() {
			return {
				list:[],
				showForm:false,
				curId:0,
				title:"",
				info:{
					
				},
				taskInfo:{},
				detail:"",
				
			}
		},
		onShow(){
			
			this.$nextTick(()=>{
				if(uni.getStorageSync("islogin")){
					this.reload()
				}
			})
		},
		
		onLoad() {
			if(uni.getStorageSync("islogin")){
				const { id } = this.$Route.query
				if(!id){
					this.$Errback("數據錯誤")
				}else{
					this.curId=id;
					this.init()
				}
			}else{
				this.$Toast("請先登錄")
				setTimeout(()=>{
					this.toPage("Home")
				},1200)
			}
		},
		methods: {
			openBox(){
				this.showForm=true
			},
			
			queryList(pageNo,pageSize){
				let data = {
					pageNo,
					pageSize,
					tasklogid:this.curId,
					uid:uni.getStorageSync("uid")
				}
				getMessagelist(data).then((res)=>{
					this.$refs.paging.complete(res)
				}).catch((err)=>{
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				})
				
			},
			init(){
				//將未讀改為已讀
				let uid =uni.getStorageSync("uid")
				changeMessageStatus({id:this.curId,uid}).then((res)=>{}).catch(()=>{})
			},
			subMessage(){
				if(!this.detail){
					this.$Toast("留言內容不能為空")
					return;
				}
				let uid =uni.getStorageSync("uid")
				let data = {
					tasklogid:this.curId,
					uid,
					detail:this.detail
				}
				subMessages(data).then((res)=>{
					this.detail=""
					this.$Toast(res.msg)
					setTimeout(()=>{
						this.reload();
					},1200)
				}).catch((err)=>{
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				}).finally(()=>{
					this.showForm=false
				})
				
			},
			reload(){
				this.$refs.paging.reload();
			},
			goBack(){
				uni.navigateBack(-1)
			},
			toPage(name,params={}){
				this.$navi({
				    route:{
				        name,
						params
				    },
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		min-height: 100vh;
	}
	.main{
		padding-top: 88rpx;
		padding-bottom: 50rpx;
		.list{
			.item{
				padding: 30rpx 20rpx;
				border-radius: 8rpx;
				box-shadow: 4rpx 4rpx 6rpx rgba(0, 0, 0, 0.03);
				.left{
					width: 120rpx;
				}
				.right{
					width: calc(100% - 140rpx);
					margin-left: 20rpx;
					.detail{
						// padding-left: 20rpx;
					}
				}
			}
		}
	}
	.messbox{
		width: 80vw;
		padding: 30rpx;
		.txtbox{
			padding: 20rpx;
			border: 2rpx dashed #e0e0e0;
			border-radius: 16rpx;
			box-sizing: border-box;
			.input{
				width: 100%;
			}
		}
		.btn{
			width: 220rpx;
			height: 70rpx;
			margin: 30rpx auto 0;
			background-color: #007aff;
			border-radius: 10rpx;
		}
		
	}
</style>
